<template>
    <div class="trans">
        <tab :item="tabItem" @changePane="changePane"></tab>
        <div class="pane" :class="{active:0 === index}">
            全部
        </div>
        <div class="pane" :class="{active:1 === index}">
            收入
        </div>
        <div class="pane" :class="{active:2 === index}">
            支出
        </div>
    </div>
</template>
<script>
    import tab from "../../components/tabBtn.vue";
    export default {
        name:"tran",
        components:{
            tab
        },
        data(){
            return {
                tabItem:[
                    {liNums:"liThree",cont:"全部"},
                    {liNums:"liThree",cont:"收入"},
                    {liNums:"liThree",cont:"支出"}
                ],
                index:0
            }
        },
        mounted(){

        },
        methods:{
            changePane(index){
                this.index = index;
            }
        }
    }
</script>
<style lang="scss">
    .trans {
        .pane {
            display: none;
        }
        .active {
            display: block !important;
        }
    }
</style>
